<template>
  <view class="money">
		<view class="month_revenue">
			<view class="left">
				<view class="name">本月营业额(元)：</view>
				<view class="num">{{ info?.toMonthTotalTurnover || 0 }}</view>
			</view>
			<image class="icon" src="/static/image/home/money.png" mode="aspectFill" />
		</view>
    <view class="status">
      <view class="sub sub1">
        <view>今日收入(元)：{{ data?.todayTotalTurnover || 0 }}</view>
        <view>昨日收入(元)：{{ data?.yesterdayTotalTurnover || 0 }}</view>
      </view>
      <view class="sub sub2">
        <view>合计投币：<text class="money-num">{{ info?.totalCoins || 0 }}个</text></view>
        <view>线上：<text class="money-num">{{ info?.onlineCoins || 0 }}个</text></view>
        <view>线下：<text class="money-num">{{ info?.offlineCoins || 0 }}个</text></view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
const props = defineProps([
	"data",
	"info"
])
</script>

<style lang="scss" scoped>
.money {
	position: relative;	
	.month_revenue {
		width: 750rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 0 64rpx;
		margin-bottom: 18rpx;
		.left {
			color: #ffffff;
			.name {
			  font-size: 28rpx;
			  margin-bottom: 12rpx;
			}
			.num {
			  font-size: 64rpx;
			  font-weight: bold;
			  line-height: 75rpx;
			}
		}
		.icon {
		  width: 282rpx;
			height: 242rpx;
		}
	}
	
	.status {
	  width: 100%;
	  padding: 0 64rpx;
	  box-sizing: border-box;
	  color: #ffffff;
	  .money-num {
	    display: inline-block;
	  }
	  .sub {
	    font-size: 24rpx;
	    margin-bottom: 30rpx;
	    display: flex;
			justify-content: space-between;
			&.sub1 {
				view {
					width: 50%;
				}
			}
			&.sub2 {
				view:nth-child(1) {
					width: 40%;
				}
			}
			view {
				display: inline-flex;
				width: 30%;
			}
	  }
	}
}
</style>
